<template>
  <div class="content">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/reports' }">数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="dataDiv">
      <div
        id="main"
        style="width: 750px;height:400px;"
      ></div>
      <div
        id="bar"
        style="width: 750px;height:400px;"
      ></div>
    </div>
    <div class="dataDiv">
      <div
        id="line"
        style="width: 750px;height:400px;"
      ></div>
      <div
        id="pie"
        style="width: 750px;height:400px;"
      ></div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import _ from 'lodash'
export default {
  data () {
    return {
      //系统默认的图表
      options: {
        title: {
          text: '默认图标',
          show: true,
          link: 'https://gitee.com/chenli_wow/elementui',
          textStyle: {
            color: '#ffffff'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#E9EEF3'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            boundaryGap: false
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ]
      },
      barOptions: {
        title: {
          text: '战力表-柱状图',
          textStyle: {
            color: '#ffffff'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: 'pink'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [
              '1月',
              '2月',
              '3月',
              '4月',
              '5月',
              '6月',
              '7月',
              '8月',
              '9月',
              '10月',
              '11月',
              '12月'
            ],
            textStyle: {
              color: '#ffffff'
            },
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '我的体重',
            type: 'bar',
            stack: '总量',
            // 是否让线条圆滑显示
            smooth: true,
            data: [
              '15',
              '60',
              '20',
              '10',
              '30',
              '50',
              '80',
              '50',
              '40',
              '90',
              '110',
              '20'
            ]
          }
        ]
      },
      lineOptions: {
        title: {
          text: '战力表-折线图',
          textStyle: {
            color: '#ffffff'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              // backgroundColor: '#E9EEF3'
              backgroundColor: 'pink'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [
              '1月',
              '2月',
              '3月',
              '4月',
              '5月',
              '6月',
              '7月',
              '8月',
              '9月',
              '10月',
              '11月',
              '12月'
            ],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '我的体重',
            type: 'line',
            stack: '总量',
            // 是否让线条圆滑显示
            smooth: true,
            data: [
              '15',
              '60',
              '20',
              '10',
              '30',
              '50',
              '80',
              '50',
              '40',
              '90',
              '110',
              '20'
            ]
          }
        ]
      },
      pieOptions: {
        title: {
          text: '战力表-饼图',
          textStyle: {
            color: '#ffffff'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          top: '20%',
          textStyle: {
            color: '#ffffff'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        series: [
          {
            name: '我的体重',
            type: 'pie',
            stack: '总量',
            center: ['50%', '50%'],
            radius: '50%',
            textStyle: {
              color: '#ffffff'
            },
            data: [
              { value: 17, name: '苹果' },
              { value: 20, name: '香蕉' },
              { value: 5, name: '梨' },
              { value: 30, name: '葡萄' },
              { value: 40, name: '桃子' },
              { value: 50, name: '橘子' },
              { value: 20, name: '菠萝' },
              { value: 15, name: '榴莲' },
              { value: 17, name: '草莓' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  },
  mounted () {
    this.getReports()
    this.setBar()
    this.setLine()
    this.setPie()
    window.addEventListener()
  },
  methods: {
    async getReports () {
      let myChart = echarts.init(document.getElementById('main'))
      const { data: res } = await this.$http.get('reports/type/1')
      if (200 !== res.meta.status) {
        return this.$message.error('获取数据失败')
      }
      const result = _.merge(res.data, this.options)
      myChart.setOption(result)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
    setBar () {
      let myChart = echarts.init(document.getElementById('bar'))
      myChart.setOption(this.barOptions)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
    setLine () {
      let myChart = echarts.init(document.getElementById('line'))
      myChart.setOption(this.lineOptions)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
    setPie () {
      let myChart = echarts.init(document.getElementById('pie'))
      myChart.setOption(this.pieOptions)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    }
  }
}
</script>
<style lang="less" scoped>
.content {
  background: url('../../assets/bg.jpg') rgba(255, 255, 255, 0.03);
}
.main {
  background: url('../../assets/line(1).png') rgba(255, 255, 255, 0.03);
}
.dataDiv {
  width: 100%;
  height: 400px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
</style>
